@use '../../../styles/variables' as *;
@use './axiom-base-sheet';

.axiom-multi-select-sheet {
  @extend .axiom-base-sheet;

  .content {
    @extend .axiom-base-sheet__content;
    flex-direction: column;
    height: 100%;
  }

  // 搜索区域
  .search-section {
    @extend .axiom-base-sheet__search;
  }

  // 已选择项目展示区域
  .selected-section {
    @extend .axiom-base-sheet__selected-section;
    
    .section-title {
      @extend .axiom-base-sheet__selected-title;
      color: var(--primary-color);
    }
    
    .selected-tags {
      @extend .axiom-base-sheet__selected-tags;
      
      .selected-tag {
        @extend .axiom-base-sheet__selected-tag;
        color: var(--text-color-on-primary);
        
        :deep(.el-tag__close) {
          @extend .axiom-base-sheet__selected-tag-close;
          &:hover {
            @extend .axiom-base-sheet__selected-tag-close-hover;
          }
        }
      }
    }
  }

  // 选项列表区域
  .options-section {
    flex: 1;
    padding: var(--axiom-spacing-md, 16px) var(--axiom-spacing-lg, 24px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    
    .options-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--axiom-spacing-md, 16px);
      
      .section-title {
        font-size: var(--axiom-font-size-md, 15px);
        font-weight: var(--axiom-font-weight-semibold, 600);
        color: var(--text-color);
      }
      
      .select-all-btn {
        font-size: var(--axiom-font-size-xs, 12px);
        color: var(--primary-color);
        
        &:hover {
          background: var(--primary-color);
          color: var(--text-color-on-primary);
        }
      }
    }
    
    .options-list {
      flex: 1;
      overflow-y: auto;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--axiom-spacing-xxs, 6px);
      
      // 自定义滚动条
      &::-webkit-scrollbar {
        width: var(--axiom-scrollbar-width, 6px);
      }
      
      &::-webkit-scrollbar-track {
        background: var(--bg-color-tertiary);
        border-radius: var(--axiom-scrollbar-thumb-border-radius, 3px);
      }
      
      &::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        opacity: 0.5;
        border-radius: var(--axiom-scrollbar-thumb-border-radius, 3px);
        
        &:hover {
          opacity: 0.8;
        }
      }
      
      .option-item {
        display: flex;
        align-items: center;
        padding: var(--axiom-spacing-sm, 12px) var(--axiom-spacing-md, 16px);
        border-radius: var(--axiom-border-radius-medium, 10px);
        cursor: pointer;
        transition: all var(--axiom-transition-duration-base) ease;
        border: 1px solid transparent;
        background: var(--bg-color-tertiary);
        margin-bottom: var(--axiom-spacing-xs, 8px);
        
        &:hover {
          background: rgba(var(--primary-color-rgb), 0.05);
          border-color: rgba(var(--primary-color-rgb), 0.2);
          transform: translateX(var(--axiom-multi-select-sheet-item-hover-translate-x, 2px));
        }
        
        &.selected {
          background: rgba(var(--primary-color-rgb), 0.1);
          border-color: var(--primary-color);
          
          .option-content {
            .option-label {
              color: var(--primary-color);
              font-weight: var(--axiom-font-weight-semibold, 600);
            }
            
            .option-description {
              color: var(--primary-color-light);
            }
          }
        }
        
        .option-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: var(--axiom-spacing-xxs, 4px);
          
          .option-label {
            font-size: var(--axiom-font-size-sm, 14px);
            font-weight: var(--axiom-font-weight-medium, 500);
            color: var(--text-color);
            transition: all var(--axiom-transition-duration-base) ease;
          }
          
          .option-description {
            font-size: var(--axiom-font-size-xs, 12px);
            line-height: 1.4;
            color: var(--text-color-light);
            transition: all var(--axiom-transition-duration-base) ease;
          }
        }
        
        .option-indicator {
          flex-shrink: 0;
          margin-left: var(--axiom-spacing-sm, 12px);
          
          .option-icon {
            font-size: var(--axiom-font-size-md, 16px);
            color: var(--text-color-light);
            transition: all var(--axiom-transition-duration-base) ease;
            
            &.single {
              color: var(--primary-color);
              font-weight: var(--axiom-font-weight-semibold, 600);
            }
          }
        }
        
        &.selected .option-indicator .option-icon {
          color: var(--primary-color);
        }
      }
      
      .empty-state {
        text-align: center;
        padding: var(--axiom-spacing-xl, 40px) var(--axiom-spacing-lg, 20px);
        color: var(--text-color-light);
      }
      
      // ... more specific list item styles
    }
  }

  .footer {
    @extend .axiom-base-sheet__footer;

    .actions {
      @extend .axiom-base-sheet__footer-actions;
    }
  }
}

// 响应式适配
@media (max-width: 480px) {
  .axiom-multi-select-sheet {
    .search-section {
      padding: 0 16px 12px;
    }
    
    .selected-section {
      padding: 12px 16px;
    }
    
    .options-section {
      padding: 12px 16px;
    }
  }
}

// 主题特殊适配
.theme-cyberpunk .axiom-multi-select-sheet,
.theme-neon .axiom-multi-select-sheet {
  .options-section .options-list .option-item {
    &.selected {
      box-shadow: 
        0 2px 8px rgba(var(--primary-color-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    
    &:hover {
      box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.2);
    }
  }
  
  .selected-section .selected-tags {
    :deep(.c-tag) {
      .el-tag {
        box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.3);
      }
    }
  }
} 